<template>
  <view class="category">
    <!-- 搜索框 -->
    <ugo-search></ugo-search>
    <!-- 内容 -->
    <view class="main">
      <!-- 左侧 -->
      <view class="menu">
        <view
          :class="['menu-item',current === index?'active':'']"
          v-for="(item,index) in menus"
          :key="item"
          @click="handleItemSelect(index)"
        >{{item}}</view>
      </view>
      <!-- 右侧侧 -->
     <view class="content">
        <!-- 商品组 -->
        <view class="goods-group" v-for="item1 in goods" :key="item1.cat_id">
           <!-- 标题 -->
           <view class="goods-title">{{item1.cat_name}}</view>
           <!-- 列表 -->
           <view class="goods-list">
             <navigator v-for="item2 in item1.children" :key="item2.cat_id" :url="'/pages/goods_list/goods_list?id='+item2.cat_id">
               <u-image width="120rpx" height="120rpx" :src="item2.cat_icon"></u-image>
               <view class="goods-name">{{item.cat_name}}</view>
             </navigator>
           </view>
        </view>
     </view>
    </view>
  </view>
</template>

<script>
export default {
data(){
  return{
    // categories:[],
    // 控制左侧菜单选中的索引
    current:0,
    menus:[],
    goods:[]
  }
},
// 使用小程序的生命周期
onLoad(){
    // 小程序中 缓存 类似 网页 本地存储
    // 小程序中的缓存 代码的写法 比 网页的简单 好用  支持任意的格式 不用 转json！！！
    // localStorage

    // {data:真实的数据,time:时间戳}

    // 就是一个普通的全局变量
  this.categories = []
  // this.getCategory()
   // 获取缓存数据 ""
   const storeCategory = uni.getStorageSync("categories")
   // 判断 该缓存是否存在即可
   if(storeCategory){
      // 有缓存
      // 判断缓存数据有没有过期 重要   10s
      // 时间戳 单位 是 毫秒
      if(Date.now()-storeCategory.time > 1000 * 10){
          // 过期 重新发送请求
        console.log("过期 重新发送请求");
        this.getCategory();
      }else{
         // 没有过期 可以使用缓存
        console.log("没有过期 可以使用缓存");
        this.categories = storeCategory.data
        
        this.menus =  this.categories.map((item) => item.cat_name);

        this.goods = this.categories[this.current].children;
      }
   }else{
      console.log("没有缓存");
      // 发送请求 获取数据
      this.getCategory();
   }
},
methods:{
  // 获取接口数据
  async getCategory(){
    const res = await this.$u.get('/categories')
    // console.log(res);
    // 不会出现data中的  只是一个普通的全局变量而已！！
    this.categories = res.message;

    // 把数据存入到缓存中
      uni.setStorageSync("categories", {
        data: this.categories,
        time: Date.now(),
      });

    this.menus =  this.categories.map((item) => item.cat_name);

    this.goods = this.categories[this.current].children;
  },
  // 左侧标题的点击事件
  handleItemSelect(current){
    this.current = current
    this.goods = this.categories[this.current].children;
  }
}
}
</script>

<style lang="scss">
.category{
  height: 100vh;
  display: flex;
  flex-direction: column;
  .main{
    flex: 1;
    display: flex;
    overflow: hidden;
    .menu{
      width: 182rpx;
      overflow: auto;
      background-color: #f3f3f3;
       .menu-item {
        height: 74rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
      }
      .active {
        position: relative;
        color: $themeColor;
      }
        .active::before {
        content: "";
        height: 80%;
        display: block;
        width: 5rpx;
        background-color: $themeColor;
        position: absolute;
        left: 0;
      }
    }
    .content{
      flex: 1;
      overflow: auto;
      .goods-group{
        .goods-title {
          height: 74rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #666;
        }
        .goods-list {
          display: flex;
          flex-wrap: wrap;
          navigator{
            width: 33.33%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 15rpx 0;
            .goods-name {
              margin-top: 10rpx;
            }
          }
        }
      }
    }
  }
}
</style>